<template>
  <div class="component-upload-image">
    <el-image
      v-if="value"
      :src="getImage()"
      :preview-src-list="getImageList()"
      :class="[this.size]"
    >
    </el-image>
  </div>
</template>

<script>

export default {
  props: {
    value: [String, Object, Array],
    // 尺寸
    size: {
      type: String,
      default: 'medium'
    }
  },
  methods: {
    getImage() {
      const list = Array.isArray(this.value) ? this.value : this.value.split(',')
      if (list.length > 0) {
        return list[0]
      } else {
        return null
      }
    },
    getImageList() {
      return Array.isArray(this.value) ? this.value : this.value.split(',')
    }
  }
}
</script>
<style scoped lang="scss">
.mini {
  width: 54px;
  height: 54px;
  border-radius: 6px;
}

.small {
  width: 70px;
  height: 70px;
  border-radius: 8px;
}

.medium {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

</style>

